<template>
	<view class="content">
		<view>
			<long-categories :list="list" :maxSelected="max" @change="change"></long-categories>
			<view class="button-group">
				<button class="reset-btn" @click="handleReset">重置</button>
				<button class="confirm-btn" @click="handleConfirm">确定</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getServiceInfoList
	} from '@/api/contract.js'
	import {
		onLoad
	}
	from '@dcloudio/uni-app';
	const list = ref([]) // 最终渲染的嵌套数据
	const count = ref(0)
	const max = ref(5)
	const selectedItemIds = ref([])
	// 定义一个变量存储当前需要发射的事件名
	const targetEventName = ref('categorySelected'); // 默认值
	// 接收跳转参数
	onLoad((options) => {
		if (options.eventName) {
			targetEventName.value = options.eventName; // 覆盖为传递的事件名
		}
	});

	const loadServiceData = async () => {
		try {
			const res = await getServiceInfoList()
			console.log('服务数据:', res)

			if (res.code === 200 && res.data) {
				const {
					sevList,
					sevTypeList,
					sevItemList
				} = res.data
				// 转换为三级嵌套结构
				list.value = convertToNestedStructure(sevTypeList, sevList, sevItemList)
			}
		} catch (error) {
			console.error('获取服务数据失败', error)
		}
	}

	// 核心：将扁平数据转换为三级嵌套结构
	const convertToNestedStructure = (level1List, level2List, level3List) => {
		return level1List.map(level1 => {
			// 1. 筛选当前一级类目下的二级类目（parentId === 一级id）
			const matchedLevel2 = level2List.filter(level2 => level2.parentId == level1.id)

			// 2. 为每个二级类目匹配三级类目
			const children = matchedLevel2.map(level2 => {
				// 筛选当前二级类目下的三级类目（parentId === 二级id）
				const matchedLevel3 = level3List.filter(level3 => level3.parentId == level2.id)

				// 3. 转换三级类目为组件所需格式
				const level3Items = matchedLevel3.map(level3 => {
					// 提取三级类目ID（第二个'-'后面的值）
					const thirdLevelId = level3.id.split('-')[2]
					return {
						id: thirdLevelId, // 使用提取的三级ID
						name: level3.name,
						disabled: false,
						checked: false
					}
				})

				// 返回二级类目结构（包含三级类目）
				return {
					id: level2.id,
					name: level2.name,
					children: level3Items, // 三级类目列表
					selectedIds: {} // 组件记录选中状态
				}
			})

			// 返回一级类目结构（包含二级类目）
			return {
				id: level1.id,
				name: level1.name,
				children: children, // 二级类目列表
				selectedIds: {} // 组件记录选中状态
			}
		})
	}
	const handleReset = () => {
		// 1. 清空选中的ID数组
		selectedItemIds.value = [];

		// 2. 重置list中所有三级选项的checked状态（核心：同步组件内部选中状态）
		list.value.forEach(level1 => {
			level1.children.forEach(level2 => {
				level2.children.forEach(level3 => {
					level3.checked = false; // 取消所有三级选项的勾选
				});
				// 可选：重置二级分类的选中状态记录
				level2.selectedIds = {};
			});
			// 可选：重置一级分类的选中状态记录
			level1.selectedIds = {};
		});

		// 3. 触发change事件同步组件状态（如果组件需要显式通知）
		// （如果组件内部依赖change事件更新UI，可手动触发一次空数据）
		change([]);

		console.log('已重置所有选择');
	};
	const change = (data) => {
		selectedItemIds.value = data
			.map(item => {
				try {
					// 直接使用item.id，因为数据结构已经是三级ID
					return item.id;
				} catch (e) {
					console.error('ID解析错误:', e);
					return null;
				}
			})
			.filter(id => id !== null); // 过滤无效值，确保结果是数组（可能为空数组）
		console.log('当前选中的有效ID:', selectedItemIds.value); // 确认是数组
	}
	// 确认按钮
	const handleConfirm = () => {
		console.log('确认选择的ID:', selectedItemIds.value);

		if (selectedItemIds.value.length > 0) {
			// 只发射目标事件，而非两个事件
			uni.$emit(targetEventName.value, {
				ids: selectedItemIds.value
			});
			uni.navigateBack();
		}
	}

	onMounted(() => {
		loadServiceData()
	})
</script>

<style scoped lang="scss">
	// 新增按钮样式
	.button-group {
		width: 685rpx;
		height: 166rpx;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		align-items: center;
		padding: 0 24rpx;

		button {
			line-height: 88rpx;
			border-radius: 44rpx;
			font-size: 30rpx;
			margin: 0;
			padding: 0;

			&::after {
				border: none;
			}
		}

		.reset-btn {
			width: 189rpx;
			height: 88rpx;
			background: #999999;
			color: #fff;
		}

		.confirm-btn {
			width: 489rpx;
			height: 88rpx;
			background: #2F80ED;
			color: #FFFFFF;
		}
	}
</style>